<template>
	<view class="login-page">
        <view class="banner">
            <image class="logo" mode='widthFix' src="https://bizser.njtrh.com:9954/images/biztd/20211209/20211209004835381.jpg" alt="">
        </view>
        <view class="login-form">
            <input class="ipt input-phone" type="number" v-model="phone" placeholder="请输入手机号">
            <view class="switch-box" :class="{showPwBox: isLoginByPw ? true : false}">
                <view class="verifyCode-box">
                    <input class="ipt input-verifyCode" type="text" v-model="verifyCode" placeholder="请输入验证码">
                    <button class="btn-verifyCode" type="text" @click="sendVerifyCode">{{flag ? '获取验证码' : num}}</button>
                </view>
                <view class="pw-box">
                    <input class="ipt input-pw" type="password" v-model="pw" placeholder="请输入密码">
                </view>
            </view>
     
            <button class="btn-login" @click="login">登录</button>
        </view>
        <view v-if="isLoginByPw" class="switch-pw" @click="isLoginByPw = !isLoginByPw">验证码登录</view>
        <view v-else class="switch-pw" @click="isLoginByPw = !isLoginByPw">密码登录</view>

        <u-divider class="divider">第三方登录</u-divider>
		<image class="wx-logo" src="https://bizser.njtrh.com:9954/images/biztd/20211209/20211209004926834.jpg" @click="loginByWx">
        <u-toast ref="uToast" />
	</view>
</template>

<script>
    import Vue from 'vue';
	import md5Libs from "uview-ui/libs/function/md5";    
	import { 
		getOpenIdAPI,
		getVerifyAuthCodeAPI,
		sendVerifyByAuthCodeAPI,
		checkPhoneRegAPI,
        loginAPI,
        loginByVerifyCodeAPI,
        loginByOpenIdAPI
	} from '../../api/login'

    const app = getApp()

	export default Vue.extend({
		data() {
			return {
				title: 'Login',
                phone: '',
                verifyCode: '',
                flag: true,
                num: 60,
                isLoginByPw: false,
                pw: ''
			}
		},
		onLoad(options) {
            console.log(getApp().globalData)
		},
		methods: {
            login(){
                if(this.phone.length !== 11) {
	                this.$refs.uToast.show({
				    	title: '请输入正确手机号',
				    	type: 'error',
                    })
                    return false
                }
                if(this.isLoginByPw){
                    this.loginByPw()
                } else {
                    this.loginByVerifyCode()
                }
            },
            loginByPw(){
                if(!this.pw){
                    this.$refs.uToast.show({
				    	title: '请输入密码',
				    	type: 'error',
                    })
                    return false
                }

                loginAPI({
                    phoneNumber: this.phone,
					userPassword: md5Libs.md5(this.pw),
                }).then(res => {
                    console.log('登录成功', res)
                    app.globalData.userName = res.userName
                    app.globalData.userIdNo = res.userIdNo
                    app.globalData.phoneNumber = res.phoneNumber
                    app.globalData.avatarUrl = res.portraitUri
                    app.globalData.sessionId = res.sessionId
                    wx.setStorage({
                        key: 'userInfo',
                        data: {
                            pltUserId: res.pltUserId,	
                            userIdNo: res.userIdNo,	
                            userName: res.userName,	
                            portraitUri: res.portraitUri,	
                            phoneNumber: res.phoneNumber,
                            sessionId: res.sessionId
                        }
                    })
                    this.$refs.uToast.show({
				    	title: '登录成功！',
                        type: 'success',
                        callback: () => {
                            // this.$u.route({
                            //     type: 'tab',
                            //     url: 'pages/mine/mine'
                            // })
                            this.$u.route({type: 'navigateBack'})
                        }
                    })
                }).catch(err => {
                    if(err==='不存在账号信息'){
                        this.$refs.uToast.show({
				        	title: '手机未注册，准备跳转注册界面',
                            type: 'warning',
                            callback: () => {
				                this.$u.route('pages/signup/signup', {
				                	phone: this.phone,
				                	verifyCode: this.verifyCode,
				                })
                            }
                        })
                    } else {
                        this.$refs.uToast.show({
				        	title: err,
				        	type: 'error',
                        })
                    }
                })
            },
            loginByVerifyCode(){
                if(!this.verifyCode){
                    this.$refs.uToast.show({
				    	title: '请输入验证码',
				    	type: 'error',
                    })
                    return false
                }

                checkPhoneRegAPI({
                    phoneNumber: this.phone, 
                    verifyCode: this.verifyCode
                }).then(res => {
                    return loginByVerifyCodeAPI({
                        phoneNumber: this.phone, 
                        verifyCode: this.verifyCode
                    })
                }).then(res => {
                    app.globalData.userName = res.userName
                    app.globalData.userIdNo = res.userIdNo
                    app.globalData.phoneNumber = res.phoneNumber
                    app.globalData.avatarUrl = res.portraitUri
                    app.globalData.sessionId = res.sessionId
                    wx.setStorage({
                        key: 'userInfo',
                        data: {
                            pltUserId: res.pltUserId,	
                            userIdNo: res.userIdNo,	
                            userName: res.userName,	
                            portraitUri: res.portraitUri,	
                            phoneNumber: res.phoneNumber,
                            sessionId: res.sessionId,
                        }
                    })
                    this.$refs.uToast.show({
				    	title: '登录成功！',
                        type: 'success',
                        callback: () => {
                            // this.$u.route({
                            //     type: 'tab',
                            //     url: 'pages/mine/mine'
                            // })
                            this.$u.route({type: 'navigateBack'})
                        }
                    })
                }).catch(err => {
                    if(err==='不存在账号信息'){
                        this.$refs.uToast.show({
				        	title: '手机未注册，准备跳转注册界面',
                            type: 'warning',
                            callback: () => {
				                this.$u.route('pages/signup/signup', {
				                	phone: this.phone,
				                	verifyCode: this.verifyCode,
				                })
                            }
                        })
                    } else {
                        this.$refs.uToast.show({
				        	title: err,
				        	type: 'error',
                        })
                    }
                })
            },
			sendVerifyCode(){
                if(this.phone.length !== 11) {
	                this.$refs.uToast.show({
				    	title: '请输入正确手机号',
				    	type: 'error',
                    })
                    return false
                }
                if(!this.flag){
                    this.$refs.uToast.show({
				    	title: '倒计时结束后再发送',
				    	type: 'warning',
                    })
                    return false
                }
				getVerifyAuthCodeAPI({phoneNumber: this.phone}).then(res => {
					return sendVerifyByAuthCodeAPI({
                        phoneNumber: this.phone, 
                        authCode: res.authCode
                    })
				}).then(res => {
                    this.$refs.uToast.show({
				    	title: '验证码已发送',
                        type: 'success'
                    })
                    this.flag = false
                    let that = this
                    this.num--
                    let timer = setInterval(function(){
                        that.num--
                        if(that.num <= 0){
                            that.flag = true
                            that.num = 60
                            clearInterval(timer)
                        }
                    }, 1000)
				}).catch(err => {
                    console.log(err)
                    this.$refs.uToast.show({
				    	title: err,
				    	type: 'error',
                    })
                })
			},
            loginByWx(){
                wx.login({
                    success: (res) => {
                        let openId
                        getOpenIdAPI({
                            code: res.code
                        }).then(response => {
                            openId = response.openId
                            return loginByOpenIdAPI({
                                openId
                            })
                        }).then(res => {
                            getApp().globalData.userName = res.userName
                            getApp().globalData.userIdNo = res.userIdNo
                            getApp().globalData.phoneNumber = res.phoneNumber
                            getApp().globalData.avatarUrl = res.portraitUri
                            getApp().globalData.sessionId = res.sessionId
                            getApp().globalData.openId = openId
                            wx.setStorage({
                                key: 'userInfo',
                                data: {
                                    pltUserId: res.pltUserId,	
                                    userIdNo: res.userIdNo,	
                                    userName: res.userName,	
                                    portraitUri: res.portraitUri,	
                                    phoneNumber: res.phoneNumber,
                                    sessionId: res.sessionId,
                                }
                            })
                            wx.setStorage({
                                key: 'openId',
                                data: openId
                            })
                            this.$u.route({type: 'navigateBack'})
                        }).catch(err => {
                            getApp().globalData.openId = openId
                            wx.setStorage({
                                key: 'openId',
                                data: openId
                            })
                            if(err==='用户信息为空！'){
                                this.$refs.uToast.show({
				                	title: '尚未注册，准备跳转注册界面',
                                    type: 'warning',
                                    callback: () => {
				                        this.$u.route('pages/signup/signup')
                                    }
                                })
                            }
                        })
                    }
                })
            }
		},
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

button:after{
    border: none;
}

.banner{
    height: 40vh;
    background-image: url('https://z3.ax1x.com/2021/04/26/gp8sz9.jpg');
    background-size: cover;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo{
        width: 70vw;
    }
}
.login-form{
    margin-top: 60rpx;
    .input-phone{
        width: 80vw;
        margin: 0 auto;
        margin-bottom: 30rpx;
    }
    .switch-box{
        width: 200vw;
        display: flex;
        margin-bottom: 30rpx;
        transition-duration: 0.2s;
        &.showPwBox{
            margin-left: -100vw;
        }
        .verifyCode-box{
            width: 100vw;
            display: flex;
            margin: 0 10vw;
            box-sizing: border-box;
            .input-verifyCode{
                width: 45vw;
                margin-right: 30rpx;
            }
            .btn-verifyCode{
                flex: 1;
                padding: 0;
                font-size: 32rpx;
                text-align: center;
                line-height: 100rpx;
                background-color: #efefef;
                color: #999;
            }
        }
        .pw-box{
            width: 100vw;
            margin: 0 10vw;
            box-sizing: border-box;
            .input-pw{
                width: 80vw;
            }
        }
    }
    .btn-login{
        width: 80vw;
        line-height: 100rpx;
        border: none;
        background-color: $theme-color;
        color: #fff;
    }
}

.ipt{
    font-size: 32rpx;
    line-height: 100rpx;
    height: 100rpx;
    background-color: #efefef;
    border-radius: 5px;
    padding-left: 20rpx;
    box-sizing: border-box;
}

.login-page{
    height: 100vh;
    position: relative;
    .divider{
        position: absolute;
        width: 100vw;
        bottom: 220rpx;
        text-align: center;
    }
    .wx-logo{
        position: absolute;
        bottom: 100rpx;
        left: 50%;
        margin-left: -40rpx;
        width: 80rpx;
        height: 80rpx;
    }
    .switch-pw{
        line-height: 90rpx;
        color: #999;
        text-align: center;
    }
}

</style>
